﻿<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>省市区联动演示</title>
    <link href="//unpkg.com/layui@2.11.0/dist/css/layui.css" rel="stylesheet">
    <!-- 百度地图API密钥 -->
    <meta charset="utf-8">
    <title>全景图</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <style>
        body,
        html,
        #container {
            overflow: hidden;
            width: 100%;
            height: 1200px; /* 修改高度为1200px */
            margin: 0;
            font-family: "微软雅黑";
        }

        #app {
            display: flex;
        }

        .left-panel {
            width: 50%;
            height: 100%;
            background-color: white;
            padding: 20px;
        }

        .right-panel {
            width: 50%;
            background-color: white;
            padding: 20px;
        }

        .info {
            z-index: 999;
            width: auto;
            9;
            width: auto;
            min-width: 22rem;
            padding: 0.75rem 1.25rem;
            margin-left: 1.25rem;
            position: fixed;
            top: 1rem;
            background-color: #fff;
            border-radius: 0.25rem;
            font-size: 14px;
            color: #666;
            box-shadow: 0 2px 6px 0 rgba(27, 142, 236, 0.5);
        }

        .navbar {
            display: none;
        }
    </style>
    <script type="text/javascript" src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=8oxGGtaz7YaWFZH8vLdS2kS2jCNB9Luq"></script>

</head>

<body>
    <div id="app">
        <div class="left-panel">
            <!-- 左边区域的内容 -->
            <p>
                <script src="script.js"></script>
                <form class="layui-form" lay-filter="form-demo" style="padding: 20px;">
                    <div class="layui-form-item">
                        <label class="layui-form-label">院区名称:*</label>
                        <div class="layui-input-block">
                            <input type="text" style="width:300px" id="campusName" name="campusName" autocomplete="off"
                                   placeholder="请输入" lay-verify="required" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">联系电话:*</label>
                        <div class="layui-input-block">
                            <input type="text" style="width:300px" id="contactNumber" name="contactNumber" autocomplete="off"
                                   placeholder="请输入" lay-verify="required" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">公交:*</label>
                        <div class="layui-input-block">
                            <input type="text" style="width:300px" id="publicTransit" name="publicTransit" autocomplete="off"
                                   placeholder="请输入" lay-verify="required" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">院区地址</label>
                        <div class="layui-input-inline">
                            <select name="province" lay-filter="province" id="province">
                                <option value="">请选择省</option>
                            </select>
                        </div>
                        <div class="layui-input-inline">
                            <select name="city" lay-filter="city" id="city">
                                <option value="">请选择市</option>
                            </select>
                        </div>
                        <div class="layui-input-inline">
                            <select name="district" id="district" lay-filter="district">
                                <option value="">请选择县/区</option>
                            </select>
                        </div>
                    </div>
                    <div class="layui-form-item" pane>
                        <label class="layui-form-label">套餐状态</label>
                        <div class="layui-input-block">
                            <input type="checkbox" name="campusStatus" id="campusStatus" lay-skin="switch" lay-filter="switchTest">
                        </div>
                    </div>
                    <!-- 表格-->
                    <table class="layui-hide" id="role-table"></table>
                    <div class="layui-form-item">
                        <div class="layui-input-block" style="margin-left: 130px;">
                            <button class="layui-btn" lay-submit lay-filter="demo2">确认</button>
                            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                        </div>
                    </div>
                    <!-- 百度地图容器 -->

                    <script type="text/html" id="toolDemo">
                        <div class="layui-clear-space">
                            <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="edit">+</a>
                            <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="delete">-</a>
                        </div>
                    </script>
                </form>
            </p>
        </div>
        <div class="right-panel">
            <!-- 右边区域的内容 -->
            <p> <div id="container"></div></p>
        </div>
    </div>

    <script src="//unpkg.com/layui@2.11.0/dist/layui.js"></script>
    <script>
        layui.use(['table', 'jquery', 'layer', 'laypage', 'form', 'laydate'], function () {
            var $ = layui.jquery;
            var layer = layui.layer;
            var laypage = layui.laypage;
            var laydate = layui.laydate;
            var form = layui.form;
            var table = layui.table;

            // 百度地图API功能
            // var map = new BMapGL.Map("container");
            // map.centerAndZoom(new BMapGL.Point(116.404, 39.915), 11);
            // var geocoder = new BMapGL.Geocoder();

            // 日期时间选择器
            laydate.render({
                elem: '#ID-laydate-type-datetime',
                type: 'datetime'
            });

            // 初始化表格
            table.render({
                elem: '#role-table',
                id: 'Messagetable',
                height: '200',
                cols: [[
                    { field: 'navigationintheHospitalId', width: 80, sort: true, fixed: 'left', title: '序号' },
                    { field: 'floor', width: 130, title: '楼层' },
                    { field: 'floorindex', width: 130, title: '楼层索引' },
                    { field: 'createTime', title: '创建时间', width: 160 },
                    { fixed: 'right', title: '操作', width: 134, minWidth: 125, templet: '#toolDemo' }
                ]],
                page: true,
                limit: 15,
                limits: [2, 15, 30, 50]
            });

            // 插入默认数据
            var defaultData = [
                {
                    navigationintheHospitalId: 1,
                    floor: '1楼',
                    floorindex: '1',
                    createTime: new Date().toLocaleString()
                }
            ];
            table.reload('Messagetable', {
                data: defaultData,
                count: defaultData.length,
                limit: 15,
                curr: 1
            });

            // 加载数据函数
            function loadRoleData(PageIndex, PageSize) {
                layer.load(2);
                var Title = $('[name="Title"]').val();
                var params = {
                    PageIndex: PageIndex || 1,
                    PageSize: PageSize || 15,
                    Title: Title
                }
                $.ajax({
                    url: 'https://localhost:7171/api/NavigationintheHospital/GetNavigationintheHospital',
                    data: params,
                    type: 'get',
                    dataType: 'json',
                    success: function (res) {
                        layer.closeAll('loading');
                        if (res.code === 0) {
                            table.reload('Messagetable', {
                                data: res.data,
                                count: res.totalCount,
                                limit: PageSize || 15,
                                curr: PageIndex || 1,
                            });
                            //分页
                            laypage.render({
                                elem: 'page',
                                count: res.totalCount,
                                curr: PageIndex,
                                limit: PageSize,
                                limits: [2, 15, 30, 50],
                                layout: ['count', 'prev', 'page', 'next', 'limit','refresh','skip'],
                                jump: function (obj, first) {
                                    if (!first) {
                                        loadRoleData(obj.curr, obj.limit);
                                    }
                                }
                            });
                        } else {
                            layer.msg('获取数据失败: '+(res.message || '未知错误'), { icon: 2 });
                        }
                    },
                    error: function (xhr, status, error) {
                        layer.closeAll('loading');
                        layer.msg('请求失败: '+ error, { icon: 2 });
                        console.error('Ajax请求失败:', xhr.responseText);
                    }
                });
            }

            // 页面加载完成后获取数据
            loadRoleData(1, 15);

             function fantian() {
            $.ajax({
                url:`https:localhost:7171/api/HospitalNavigation/GetHospitalNavigationId?HospitalNavigationId=${ localStorage["hospitalNavigationId"]}`,

                type:'Get',
                dataType:'json',
                async:false,
                success: function (res) {
                    console.log(res)
                        $("#campusName").val(campusName),
                        $("#contactNumber").val(contactNumber),
                        $("#publicTransit").val(publicTransit)

                }
            })
        }

            // 初始化省份数据
            // $.get("https:localhost:7171/api/Location/provinces", function (res) {
            //     $("#province").empty().append('<option value="">请选择省</option>');
            //     $.each(res, function (index, item) {
            //         $("#province").append('<option value="' + item.provinceId + '">' + item.name + '</option>');
            //     });
            //     form.render('select');
            // }).fail(function () {
            //     console.error('获取省份数据失败，请检查接口地址或网络连接。');
            // });

            // 省份选择事件
            // form.on('select(province)', function (data) {
            //     var provinceId = data.value;
            //     $("#city").empty().append('<option value="">请选择市</option>');
            //     $("#district").empty().append('<option value="">请选择县/区</option>');
            //     form.render('select');
            //     if (provinceId) {
            //         $.get("https:localhost:7171/api/Location/cities/" + provinceId, function (res) {
            //             $.each(res, function (index, item) {
            //                 $("#city").append('<option value="' + item.cityId + '">' + item.name + '</option>');
            //             });
            //             form.render('select');
            //         }).fail(function () {
            //             console.error('获取城市数据失败，请检查接口地址或网络连接。');
            //         });
            //     }
            // });

            // 城市选择事件
            // form.on('select(city)', function (data) {
            //     var cityId = data.value;
            //     $("#district").empty().append('<option value="">请选择县/区</option>');
            //     if (cityId) {
            //         $.get("https:localhost:7171/api/Location/districts/" + cityId, function (res) {
            //             $.each(res, function (index, item) {
            //                 $("#district").append('<option value="' + item.districtId + '">' + item.name + '</option>');
            //             });
            //             form.render('select');
            //         }).fail(function () {
            //             console.error('获取区县数据失败，请检查接口地址或网络连接。');
            //         });
            //     }
            // });

            // 区县选择事件
            // form.on('select(district)', function (data) {
            //     var provinceName = $("#province option:selected").text();
            //     var cityName = $("#city option:selected").text();
            //     var districtName = data.elem.options[data.elem.selectedIndex].text;
            //     var address = provinceName + cityName + districtName;
            //     geocoder.getPoint(address, function (point) {
            //         if (point) {
            //             map.centerAndZoom(point, 13);
            //         } else {
            //             console.error('未能获取到该地区的经纬度信息');
            //         }
            //     });
            // });

            // 表格操作事件绑定
            table.on('tool(Messagetable)', function (obj) {
                var data = obj.data;
                if (obj.event === 'delete') {
                    var navigationintheHospitalId = data.navigationintheHospitalId; // 获取当前行的ID
                    layer.confirm('确定要删除这条数据吗？', { icon: 3, title: '提示' }, function (index) {
                        // 这里调用删除接口
                        $.ajax({
                            url: `https://localhost:7027/api/NavigationintheHospital/DeletedNavigationinthehospital?NavigationintheHospitalId=${navigationintheHospitalId}`,
                            method: 'POST',
                            contentType: 'application/json',
                            success: function (res) {
                                if (res.code === 100) {
                                    layer.msg('删除成功', { icon: 1 });
                                    // 重新加载表格数据
                                    loadRoleData(1, 15);
                                } else {
                                    layer.msg('删除失败: ' + (res.message || '未知错误'), { icon: 2 });
                                }
                            },
                            error: function (xhr) {
                                let errorMsg = '请求失败: ';
                                try {
                                    const res = JSON.parse(xhr.responseText);
                                    errorMsg += res.message || xhr.statusText;
                                } catch {
                                    errorMsg += xhr.statusText || '网络错误';
                                }
                                layer.msg(errorMsg, { icon: 2 });
                            }
                        });
                        layer.close(index);
                    });
                } else if (obj.event === 'edit') {
                    // 生成新数据
                    var newData = {
                        navigationintheHospitalId: Date.now(),
                        floor: '新楼层',
                        floorindex: '新楼层索引',
                        createTime: new Date().toLocaleString()
                    };

                    // 获取当前表格数据
                    var oldData = table.cache['Messagetable'] || [];
                    oldData.push(newData);

                    // 重新加载表格
                    table.reload('Messagetable', {
                        data: oldData,
                        count: oldData.length,
                        limit: 15
                    });

                    layer.msg('已添加新数据', { icon: 1 });
                }
            });
        });
        console.log(localStorage["HospitalNavigationId"])
              $(function () {
            fantian();
        })

       

    </script>
</body>
</html>